<template>
  <div class="dashboard">
    <div class="main-header">
      <h2 class="main-title">学业热点分析</h2>
    </div>
    <div class="content-box">
      <!-- 左侧饼图 -->
      <div class="left-panel">
        <div class="panel-title">问题热点排行</div>
        <p class="panel-subtitle">最受关注的学业问题类型</p>
        <v-chart
            ref="chartRef"
            class="chart"
            :option="hotspotOption"
            autoresize
            @click="onPieClick"
        />
      </div>

      <!-- 右侧分类统计 -->
      <div class="right-panel">
        <div class="panel-title">问题分类统计</div>
        <p class="panel-subtitle">按类型分布</p>
        <ul class="stat-list">
          <li
              v-for="(item, index) in categoryData"
              :key="index"
              :class="{ active: activeItem === item.name }"
              @click="highlightSlice(item.name)"
          >
            <span class="dot" :style="{ background: item.color }"></span>
            <span>{{ item.name }}</span>
            <span class="count">{{ item.value }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import VChart from "vue-echarts";
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import { TooltipComponent, LegendComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([PieChart, TooltipComponent, LegendComponent, CanvasRenderer]);

// 分类数据
const categoryData = [
  { name: "数学难题", value: 320, color: "#34c759" },
  { name: "作业辅导", value: 280, color: "#007aff" },
  { name: "考试准备", value: 240, color: "#ff9500" },
  { name: "英语语法", value: 220, color: "#ff3b30" },
  { name: "时间管理", value: 180, color: "#af52de" },
  { name: "物理概念", value: 160, color: "#ff2d55" },
];

// 当前高亮项
const activeItem = ref(null);

// 饼图配置
const hotspotOption = ref({
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    left: "left",
    textStyle: { color: "#666" },
  },
  series: [
    {
      name: "问题数",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: true,
        formatter: "{b}\n{c} ({d}%)",
      },
      labelLine: { show: true },
      data: categoryData,
    },
  ],
});

// 引用 echarts 实例
const chartRef = ref(null);

// 点击右侧列表 → 高亮饼图
const highlightSlice = (name) => {
  if (!chartRef.value) return;
  const chart = chartRef.value.chart;

  // 取消所有高亮
  chart.dispatchAction({ type: "downplay", seriesIndex: 0 });

  // 找到点击项
  const dataIndex = categoryData.findIndex((item) => item.name === name);
  if (dataIndex !== -1) {
    activeItem.value = name; // 同步右侧高亮
    chart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex,
    });
    chart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex,
    });
  }
};

// 点击饼图 → 高亮右侧列表
const onPieClick = (params) => {
  if (params.seriesType === "pie") {
    activeItem.value = params.name;
  }
};
</script>

<style scoped>
.main-header {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
}

.dashboard {
  padding: 20px;
  background: #f9fafb;
}

/* 内容区 */
.content-box {
  display: flex;
  gap: 20px;
}
.left-panel,
.right-panel {
  flex: 1;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.panel-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.panel-subtitle {
  font-size: 13px;
  color: #999;
  margin-bottom: 12px;
}
.chart {
  height: 300px;
  width: 100%;
}

/* 分类列表 */
.stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stat-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px dashed #eee;
  cursor: pointer;
}
.stat-list li:hover {
  background: #f5f5f5;
}
.stat-list li.active {
  background: #eaf3ff;
  font-weight: bold;
  color: #0056d6;
}
.stat-list li:last-child {
  border-bottom: none;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}
.count {
  font-weight: bold;
  color: #333;
}
</style>
